<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" type="text/css" href="../../c-asserts/mui/css/mui.min.css" />
    <style type="text/css">
        html, body,.content-box{
            background-color: transparent !important;
            width: 100%;
            height: 100%;
        }
        .lisContent{
            background-color:#ffffff;
        }
        .content-option{
            padding:12px 16px;
            font-size: 15px;
            color:#666666;
        }
        .active{
            background-color:#EEEEEE;
        }
    </style>
</head>
<body tapmode>
    <div class="content-box">
        <div class="lisContent">
            <div class="content-option active">智能排序</div>
            <div class="content-option">好评优先</div>
            <div class="content-option">离我最近</div>
            <div class="content-option">人均最低</div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../../c-script/api.js"></script>
<script type="text/javascript" src="../../c-script/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="../../c-script/public.js"></script>
<script type="text/javascript">

    $(document).ready(function(){
        api.addEventListener({
            name: 'item-option'
        }, function(ret, err){
            if(ret && ret.value){
                api.setFrameAttr({name:api.frameName,hidden:false});
                switch(ret.value.name){
                    case 'iarea':
                        setting(iarea,ret.value.curr,'iarea');
                        break;
                    case 'isize':
                        setting(isize,ret.value.curr,'isize');
                        break;
                    case 'icontent':
                        setting(icontent,ret.value.curr,'icontent');
                        break;
                    case 'icategory':
                        setting(icategory,ret.value.curr,'icategory');
                        break;
                    case 'iorder':
                        setting(iorder,ret.value.curr,'iorder');
                        break;
                }
            }
        });
        $('.content-box').on('click',function(){api.setFrameAttr({name: api.frameName,hidden:true})});
        $('.lisContent').on('click',function(event){event.stopPropagation();});
    };




    function setting(lis,curr,type){
        var strhtml = '';
        for(var i= 0 ; i<lis.length;i++){
            if(curr == lis[i].name) strhtml += ' <div class="content-option active"  data-type="'+type+'" data-name="'+lis[i].name+'" data-id="'+lis[i].id+'" onclick="save(this)">'+lis[i].name+'</div>';
            else strhtml += '<div class="content-option" data-type="'+type+'"  data-name="'+lis[i].name+'" data-id="'+lis[i].id+'" onclick="save(this)">'+lis[i].name+'</div>';
        }
        $('.lisContent').html(strhtml);
    };


    function save(obj){
        var type = $(obj).attr('data-type');
        var id  = $(obj).attr('data-id');
        var name = $(obj).attr('data-name');
        api.sendEvent({name:'setoption',extra:{type:type,id:id,name:name}});
        api.setFrameAttr({name: api.frameName,hidden:true});
    }
</script>
</html>